<template>
  <div id="teamAddPage">
    <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
          v-model="addTeamData.name"
          name="name"
          label="队伍名称"
          placeholder="请输入队伍名称"
          :rules="[{ required: true, message: '请填写名称' }]"
      />
      <van-field
          v-model="addTeamData.description"
          rows="4"
          autosize
          label="队伍描述"
          type="textarea"
          placeholder="请输入队伍描述"
        />
      <van-field
          v-model="addTeamData.expireTime"
          is-link
          readonly
          name="datePicker"
          label="过期时间"
          placeholder="点击选择时间"
          @click="showPicker = true"
      />
      <van-popup v-model:show="showPicker" destroy-on-close position="bottom">
        <van-date-picker
            :model-value="pickerValue"
            :min-date="new Date()"
            @confirm="onConfirm"
            @cancel="showPicker = false"
        />
      </van-popup>

      <van-field name="radio" label="队伍状态">
        <template #input>
          <van-radio-group v-model="addTeamData.status" direction="horizontal">
            <van-radio name="0">公开</van-radio>
            <van-radio name="1">私有</van-radio>
            <van-radio name="2">加密</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <van-field
          v-if= "Number(addTeamData.status)===2"
          v-model="addTeamData.password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
      />
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
    </van-form>
  </div>

</template>

<script setup lang="ts">

import {onMounted, ref} from "vue";
import myAxios from "../plugins/myAxios.js";
import {useRoute, useRouter} from "vue-router";
import {showFailToast} from "vant";

//跳转页面用router
const router = useRouter();
//获取当前页面路由信息用route
const route = useRoute();

//获取当前页面路由信息
const id = route.query.id;

const addTeamData=ref({})
//获取当前队伍信息
onMounted(async ()=> {
  if (id<=0){
    showFailToast('加载队伍信息失败!')
    return
  }
  const res = await myAxios.get('/team/get', {
    params: {
      teamId:id
    }
  })
  if (res.code === 0 && res.data) {
    addTeamData.value = res.data
  } else {
    showFailToast(res.mesaage)
  }
}
)


//过期时间参数
const showPicker = ref(false);
const pickerValue = ref([]);
const onConfirm = ({selectedValues}) => {
  addTeamData.value.expireTime = selectedValues.join('-');
  pickerValue.value = selectedValues;
  showPicker.value = false;
};


//调用后端接口提交
const onSubmit = async () => {
  const postData = {
    ...addTeamData.value,
    status: Number(addTeamData.value.status)
  }

  const res = await myAxios.post("/team/update", postData)

  if (res?.code === 0 && res.data) {
    // showSuccessToast("添加队伍成功!")
    // showToast("添加成功!")
    alert("修改成功")
    //跳转到队伍页面(这样返回就不会再回到添加页面了 避免重复添加)
    await router.replace("/team")
  } else {
    // showFailToast(res.data.message)
    // showToast("添加失败!")
    alert("修改失败")
  }
}


</script>

<style scoped>

</style>